<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>09-ajax-text</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin: 50px auto;
        text-align: center;
        background: #ccc;
      }
      img {
        width: 200px;
        height: 200px;
        display: block;
        margin: 10px auto 10px;
        border: 1px solid #000;
      }
      p {
        text-align: center;
        background-color: pink;
      }
    </style>
    <script src="./myAjax2.js"></script>
    <script>
      window.onload = function () {
        //1.获取需要设置的元素
        var oTitle = document.querySelector("#title");
        var oDes = document.querySelector("#des");
        var oImg = document.querySelector("img");
        // 2.获取所有的按钮
        var oBtns = document.querySelectorAll("button");
        // 3.给按钮添加点击事件
        oBtns[0].onclick = function () {
          var self = this;
          // 4.发送Ajax请求到服务器
          Ajax(
            "GET",
            "09-ajax-text.json",
            {},
            3000,
            function (xhr) {
              //   alert(xhr.responseText);

              // php获取数据
              // var res = xhr.responseText.split("|");
              // console.log(res);
              // oTitle.innerHTML = res[0];
              // oDes.innerHTML = res[1];
              // oImg.setAttribute("src", res[2]);

              // xml获取数据
              // var name = self.getAttribute("name");
              // console.log(name);
              // var res = xhr.responseXML;
              // var title = res.querySelector("nz");
              // console.log(res.querySelector(name + ">title"));
              // var des = res.querySelector(name + ">des").innerHTML;
              // var image = res.querySelector(name + ">image").innerHTML;
              // oTitle.innerHTML = title;
              // oDes.innerHTML = des;
              // oImg.setAttribute("src", image);

              // json获取数据
              var name = self.getAttribute("name");
              // console.log(name);
              var str = xhr.responseText;
              var obj = JSON.parse(str);
              oTitle.innerHTML = obj[name].title;
              oDes.innerHTML = obj[name].des;
              oImg.setAttribute("src", obj[name].image);
            },
            function (xhr) {
              alert(xhr.status);
            }
          );
        };
        // 3.给按钮添加点击事件
        oBtns[1].onclick = function () {
          var self = this;
          // 4.发送Ajax请求到服务器
          Ajax(
            "GET",
            "09-ajax-text.json",
            {},
            3000,
            function (xhr) {
              //   alert(xhr.responseText);

              // php获取数据
              // var res = xhr.responseText.split("|");
              // console.log(res);
              // oTitle.innerHTML = res[0];
              // oDes.innerHTML = res[1];
              // oImg.setAttribute("src", res[2]);

              // xml获取数据
              // var name = self.getAttribute("name");
              // console.log(name);
              // var res = xhr.responseXML;
              // var title = res.querySelector("nz");
              // console.log(res.querySelector(name + ">title"));
              // var des = res.querySelector(name + ">des").innerHTML;
              // var image = res.querySelector(name + ">image").innerHTML;
              // oTitle.innerHTML = title;
              // oDes.innerHTML = des;
              // oImg.setAttribute("src", image);

              // json获取数据
              var name = self.getAttribute("name");
              // console.log(name);
              var str = xhr.responseText;
              var obj = JSON.parse(str);
              oTitle.innerHTML = obj[name].title;
              oDes.innerHTML = obj[name].des;
              oImg.setAttribute("src", obj[name].image);
            },
            function (xhr) {
              alert(xhr.status);
            }
          );
        };
        // 3.给按钮添加点击事件
        oBtns[2].onclick = function () {
          var self = this;
          // 4.发送Ajax请求到服务器
          Ajax(
            "GET",
            "09-ajax-text.json",
            {},
            3000,
            function (xhr) {
              //   alert(xhr.responseText);

              // php获取数据
              // var res = xhr.responseText.split("|");
              // console.log(res);
              // oTitle.innerHTML = res[0];
              // oDes.innerHTML = res[1];
              // oImg.setAttribute("src", res[2]);

              // xml获取数据
              // var name = self.getAttribute("name");
              // console.log(name);
              // var res = xhr.responseXML;
              // var title = res.querySelector("nz");
              // console.log(res.querySelector(name + ">title"));
              // var des = res.querySelector(name + ">des").innerHTML;
              // var image = res.querySelector(name + ">image").innerHTML;
              // oTitle.innerHTML = title;
              // oDes.innerHTML = des;
              // oImg.setAttribute("src", image);

              // json获取数据
              var name = self.getAttribute("name");
              // console.log(name);
              var str = xhr.responseText;
              var obj = JSON.parse(str);
              oTitle.innerHTML = obj[name].title;
              oDes.innerHTML = obj[name].des;
              oImg.setAttribute("src", obj[name].image);
            },
            function (xhr) {
              alert(xhr.status);
            }
          );
        };
      };
    </script>
  </head>
  <body>
    <div>
      <p id="title">商品标题名称</p>
      <img src="" alt="" />
      <p id="des">商品描述信息</p>
      <button name="nz">女装</button>
      <button name="bb">包包</button>
      <button name="tx">拖鞋</button>
    </div>
  </body>
</html>
